<template>
	<div>
		<div class="register_view">
			<el-form :model="registerForm" class="register_form">
				<div class="title_view">{{projectName}}注册</div>
				<div class="list_item">
					<div class="list_label">医生账号：</div>
					<el-input class="list_inp"
						 v-model="registerForm.yishengzhanghao" 
						 placeholder="请输入医生账号"
						 type="text"
						/>
				</div>
				<div class="list_item">
					<div class="list_label">医生姓名：</div>
					<el-input class="list_inp"
						 v-model="registerForm.yishengxingming" 
						 placeholder="请输入医生姓名"
						 type="text"
						/>
				</div>
				<div class="list_item">
					<div class="list_label">医生密码：</div>
					<el-input class="list_inp"
						 v-model="registerForm.yishengmima" 
						 placeholder="请输入医生密码"
						 type="password"
						 />
				</div>
				<div class="list_item">
					<div class="list_label">确认医生密码：</div>
					<el-input class="list_inp" v-model="registerForm.yishengmima2" type="password" placeholder="请输入确认医生密码" />
				</div>
				<div class="list_item">
					<div class="list_label">照片：</div>
					<div :style='{"width":"calc(100% - 120px)"}' class="list_file_list">
						<uploads
							action="file/upload" 
							tip="请上传照片" 
							:limit="3"
							:fileUrls="registerForm.zhaopian?registerForm.zhaopian:''" 
							@change="zhaopianUploadSuccess">
						</uploads>
					</div>
				</div>
				<div class="list_item">
					<div class="list_label">性别：</div>
					<el-select 
						class="list_sel"
						v-model="registerForm.xingbie" 
						placeholder="请选择性别"
						>
						<el-option v-for="item in yishengxingbieLists" :label="item" :value="item"></el-option>
					</el-select>
				</div>

				<div class="list_item">
					<div class="list_label">诊室：</div>
					<el-input class="list_inp"
						 v-model="registerForm.zhenshi" 
						 placeholder="请输入诊室"
						 type="text"
						/>
				</div>
				<div class="list_item">
					<div class="list_label">联系电话：</div>
					<el-input class="list_inp"
						 v-model="registerForm.lianxidianhua" 
						 placeholder="请输入联系电话"
						 type="text"
						/>
				</div>
				<div class="list_item">
					<div class="list_label">擅长领域：</div>
					<el-input class="list_inp"
						 v-model="registerForm.shanzhanglingyu" 
						 placeholder="请输入擅长领域"
						 type="text"
						/>
				</div>
				<div class="list_btn">
					<el-button class="register" type="success" @click="handleRegister">注册</el-button>
					<div class="r-login" @click="close">已有账号，直接登录</div>
				</div>
			</el-form>
		</div>
	</div>
</template>
<script setup>
	import {
		ref,
		getCurrentInstance,
		nextTick,
	} from 'vue';
	const context = getCurrentInstance()?.appContext.config.globalProperties;
	const projectName = context?.$project.projectName
	//获取注册类型
	import { useRoute } from 'vue-router';
	const route = useRoute()
	const tableName = ref('yisheng')
	
	//公共方法
	const getUUID=()=> {
		return new Date().getTime();
	}
	const registerForm = ref({
        xingbie: '',
         sfsh: '待审核'
	})
	const yishengxingbieLists = ref([])
	const init=()=>{
		yishengxingbieLists.value = "男,女".split(',')
	}
    const zhaopianUploadSuccess=(fileUrls)=> {
        registerForm.value.zhaopian = fileUrls;
    }
	// 多级联动参数
	//注册按钮
	const handleRegister = () => {
		let url = tableName.value +"/register";
		if((!registerForm.value.yishengzhanghao)){
			context?.$toolUtil.message(`医生账号不能为空`,'error')
			return false
		}
		if((!registerForm.value.yishengxingming)){
			context?.$toolUtil.message(`医生姓名不能为空`,'error')
			return false
		}
		if((!registerForm.value.yishengmima)){
			context?.$toolUtil.message(`医生密码不能为空`,'error')
			return false
		}
		if(registerForm.value.yishengmima!=registerForm.value.yishengmima2){
			context?.$toolUtil.message('两次密码输入不一致','error')
			return false
		}
		if(registerForm.value.zhaopian!=null){
			registerForm.value.zhaopian = registerForm.value.zhaopian.replace(new RegExp(context?.$config.url,"g"),"");
		}
		if(registerForm.value.guahaofei&&(!context?.$toolUtil.isIntNumer(registerForm.value.guahaofei))){
			context?.$toolUtil.message(`挂号费应输入整数`,'error')
			return false
		}
		if(registerForm.value.yuhao&&(!context?.$toolUtil.isIntNumer(registerForm.value.yuhao))){
			context?.$toolUtil.message(`余号应输入整数`,'error')
			return false
		}
		if(registerForm.value.lianxidianhua&&(!context?.$toolUtil.isMobile(registerForm.value.lianxidianhua))){
			context?.$toolUtil.message(`联系电话应输入手机格式`,'error')
			return false
		}
		
		context?.$http({
			url:url,
			method:'post',
			data:registerForm.value
		}).then(res=>{
			context?.$toolUtil.message('注册成功','success', obj=>{
				context?.$router.push({
					path: "/login"
				});
			})
		})
	}
	//返回登录
	const close = () => {
		context?.$router.push({
			path: "/login"
		});
	}
	init()
</script>
<style lang="scss" scoped>
	
	.register_view {
		background-repeat: no-repeat;
		flex-direction: column;
		background-size: cover;
		background: url(http://clfile.zggen.cn/20231004/9712345d93bd40738be9e31e19e7c651.png);
		display: flex;
		min-height: 100vh;
		justify-content: center;
		align-items: center;
		position: relative;
		background-position: center center;
		// 表单盒子
		.register_form {
			border-radius: 50px;
			box-shadow: 0 4px 6px rgba(0,0,0,.5);
			padding: 30px 80px 30px 40px;
			background: #fff;
			display: flex;
			width: 688px;
			justify-content: center;
			flex-wrap: wrap;
		}
		// 标题样式
		.title_view {
			padding: 20px 0;
			color: #000;
			font-weight: bold;
			width: 100%;
			font-size: 22px;
			text-align: center;
		}
		// item盒子
		.list_item {
			margin: 10px;
			display: flex;
			width: 100%;
			justify-content: flex-start;
			align-items: center;
			// label
			.list_label {
				width: 150px;
				font-size: 14px;
				box-sizing: border-box;
				text-align: right;
			}
			// 输入框
			:deep(.list_inp) {
				border: 0px solid #ddd;
				box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
				padding: 0 10px;
				width: calc(100% - 120px);
				line-height: 40px;
				box-sizing: border-box;
				height: 40px;
				//去掉默认样式
				.el-input__wrapper{
					border: none;
					box-shadow: none;
					background: none;
					border-radius: 0;
					height: 100%;
					padding: 0;
				}
				.is-focus {
					box-shadow: none !important;
				}
			}
		}
		//下拉框样式
		:deep(.list_sel) {
			border: 0px solid #ddd;
			border-radius: 0;
			box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
			padding: 0 10px;
			width: calc(100% - 120px);
			line-height: 40px;
			box-sizing: border-box;
			//去掉默认样式
			.select-trigger{
				height: 100%;
				.el-input{
					height: 100%;
					.el-input__wrapper{
						border: none;
						box-shadow: none;
						background: none;
						border-radius: 0;
						height: 100%;
						padding: 0;
					}
					.is-focus {
						box-shadow: none !important;
					}
				}
			}
		}
		//按钮盒子
		.list_btn {
			margin: 20px 0 0;
			display: flex;
			width: 100%;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			//注册按钮
			.register {
					border: none;
					border-radius: 0;
					color: #fff;
					background: rgba(24,140,145,1);
					font-weight: bold;
					width: 200px;
					font-size: 20px;
					height: 60px;
			}
			//注册按钮悬浮样式
			.register:hover {
				border: none;
				border-radius: 0;
				background: rgba(24,140,145,.5);
				font-weight: bold;
				width: 200px;
				font-size: 20px;
				height: 60px;
			}
			//已有账号
			.r-login {
				cursor: pointer;
				padding: 20px 0 0;
				color: #999;
				width: 100%;
				font-size: 12px;
				text-align: center;
			}
		}
		//图片上传样式
		.list_file_list  {
			//提示语
			:deep(.el-upload__tip){
				margin: 7px 0 0;
				color: #999;
				display: flex;
				font-size: 12px;
				justify-content: flex-start;
				align-items: center;
			}
			//外部盒子
			:deep(.el-upload--picture-card){
				border: 1px dashed #000;
				cursor: pointer;
				background-color: #fff;
				border-radius: 8px;
				width: 80px;
				line-height: 90px;
				text-align: center;
				height: 80px;
				//图标
				.el-icon{
					color: #000;
					font-size: 32px;
				}
			}
			:deep(.el-upload-list__item) {
				border: 1px dashed #000;
				cursor: pointer;
				background-color: #fff;
				border-radius: 8px;
				width: 80px;
				line-height: 90px;
				text-align: center;
				height: 80px;
			}
		}
	}
</style>